<template>
	<view class="pb-2">
		<scroll-view scroll-y="true" class="sv" @scrolltolower="loadMore" :style="{height:scrollHeight+'px'}">
			<view class="m-2">
				<view v-for="(item, index) in paperList" :key="item.id" class="d-flex flex-row p-2 chapter_con mt-3"
					@click="gotoSumilate(item)">
					<view class="d-flex flex-column" style="width: 620upx;">
						<view class="d-flex flex-row flex-nowrap">
							<view class="chapter_icon">
								<image src="../../static/icon/exam_icon.png" style="width: 30upx;height: 30upx;">
								</image>
							</view>
							<view class="chapter_title">
								<text>{{ item.paperName }}</text>
							</view>
						</view>
						<view class="d-flex flex-row">
							<view class="w-50">
								<text>共</text><text class="mx-1 total_num">{{ item.questionNum }}</text><text>题</text>
							</view>
							<view class="w-50">
								<text>最高分:</text><text class="mx-1 right_rate">{{ item.maxScore }}</text>
							</view>
						</view>
					</view>
					<view class="arrow_right">
						<image class="mt-4" src="../../static/icon/arrow_right.png" style="width: 50upx;height: 50upx;">
						</image>
					</view>
				</view>
				<uni-load-more :status="loadStatus"></uni-load-more>

				<uni-fab horizontal="right" :pattern="pattern" @fabClick="createPaper"></uni-fab>

			</view>
		</scroll-view>
		
		<!-- 报名提示弹窗 -->
		<uni-popup ref="popup" background-color="#fff" before-close="true">
			<view class="popup-content" >
				<text>您尚未报名，请联系单位先报名考试</text>
			</view>
		</uni-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#425ca1',
					selectedColor: '#007AFF',
					buttonColor: '#425ca1',
					iconColor: '#fff',
				},
				paperList: [],
				pageNo: 1,
				pageSize: 10,
				loadStatus: 'noMore',
				
				pH:0, //窗口高度
				scrollHeight: 600,
			}
		},

		
		onShow() {
			setTimeout(()=>{
				let apply = uni.getStorageSync("staff_apply")
				if(!apply){
					this.$refs.popup.open('center')
					return 
				}else{
					// 查询模拟考试列表
					this.getSimulatePaper()
				}
			}, 500)
			
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({
				success(res) {
					console.log('res:' + JSON.stringify(res))
					that._data.pH = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
					let titleH = uni.createSelectorQuery().select(".sv"); //想要获取高度的元素名（class/id）
					titleH.boundingClientRect(data => {
						let pH = that._data.pH;
						that._data.scrollHeight = pH - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
					}).exec()
				}
			})
		},

		methods: {

			loadMore() {
				this.pageNo++
				this.getSimulatePaper()
			},

			// 查询考生模拟试卷列表
			getSimulatePaper() {
				let apply = uni.getStorageSync("staff_apply")
				let url = '/moni/getSulimatePaper?pageNo=' + this.pageNo + '&pageSize=' + this.pageSize
				this.$H.post(url, { examType : apply.examType}, {
					token: true
				}).then(res => {
					if (!res || res.code != 200) {
						return uni.showToast({
							title: '获取数据失败'
						})
					}
					// 第一页时置空列表
					if(this.pageNo == 1){
						this.paperList = []
					}
					
					let dataList = res.result.records
					if (dataList && dataList.length > 0) {
						this.paperList = [...this.paperList, ...res.result.records];
					} else {
						this.loadStatus = 'noMore'
					}
				}).catch(err => {
					if (err.msg) {
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					}
				})
			},

			// 进入模拟
			gotoSumilate(exam) {
				uni.showLoading({
					title: "请求中..."
				})
				let url = '/moni/startSimulate'
				this.$H.post(url, {
					paperId: exam.id,
					staffId: exam.staffId
				}, {
					token: true
				}).then(res => {
					if (!res || res.code != 200) {
						return uni.showToast({
							title: '操作失败'
						})
					}
					uni.hideLoading()

					let exam = res.result

					// 跳转刷题页面
					uni.navigateTo({
						url: "/pages/moni/answer?answerPaperId=" + exam.id + "&staffId=" + exam.staffId +
							"&paperId=" + exam.paperId + "&remainedTime=" + exam.remainedTime
					})
				}).catch(err => {
					if (err.msg) {
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					}
					uni.hideLoading()
				})

			},

			// 创建模拟试卷
			createPaper() {
				uni.navigateTo({
					url: '/pages/moni/create_moni'
				})
			}

		}
	}
</script>

<style>
	page {
		height: 100%;
		background: #f1f1f1;
	}

	.chapter_con {
		background-color: #ffffff;
		line-height: 60upx;
		border-radius: 10upx;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0);
		font-size: 24upx;
	}

	.arrow_right {
		width: 50upx;
		line-height: 120upx;
	}

	.chapter_title {
		width: 570upx;
		font-weight: bold;
		font-size: 30upx;
		color: #425ca1;
	}

	.chapter_icon {
		width: 50upx;
		line-height: 60upx;
		padding-top: 7upx;
	}

	.total_num {
		font-size: 30upx;
		color: #425ca1;
		font-weight: bold;
	}

	.right_rate {
		font-size: 30upx;
		color: #d40000;
		font-weight: bold;
	}
</style>